import Stats from 'stats.js';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import { Scene, PerspectiveCamera, WebGLRenderer, HemisphereLight, Vector2, BoxGeometry, MeshBasicMaterial, Mesh, AxesHelper, DoubleSide } from 'three';

import { MTLLoader } from "three/examples/jsm/loaders/MTLLoader"
import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader"
import { EffectComposer } from "three/examples/jsm/postprocessing/EffectComposer" //jsm js module
import { RenderPass } from "three/examples/jsm/postprocessing/RenderPass" //jsm js module
import { UnrealBloomPass } from "three/examples/jsm/postprocessing/UnrealBloomPass" //jsm js module


export default class City {
    constructor(dom) {
        this.scene = new Scene();
        this.camera = new PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 10000);
        this.renderer = new WebGLRenderer({ antialias: true });
        this.renderer.setSize(window.innerWidth, window.innerHeight);
        dom.appendChild(this.renderer.domElement);

        const light = new HemisphereLight(0xffffff, 0x444444); // 光源直接放置于场景之上，光照颜色从天空光线颜色渐变到地面光线颜色。
        this.scene.add(light);
        // window.addEventListener('resize', () => this.onWindowResize());

        this.camera.position.y = 1000;
        this.camera.position.z = 500;

        new OrbitControls(this.camera, this.renderer.domElement);

        // 坐标系
        const axesHelper = new AxesHelper(5000);
        this.scene.add(axesHelper);
        
        this.loadModel();
        this.initEffectComposer();
        this.render();
    }

    render() {
        window.requestAnimationFrame(() => this.render());
        this.effectComposer.render(this.scene, this.camera);
        // this.cube.rotation.x += 0.01;
        // this.renderer.render(this.scene, this.camera);
    }

    onWindowResize() {
        this.renderer.setSize(window.innerWidth, window.innerHeight);
        this.camera.aspect = window.innerWidth / window.innerHeight;
        this.camera.updateProjectionMatrix();
    }

    loadModel() {
        var mtlLoader = new MTLLoader();
        var objLoader = new OBJLoader();
        for (let i = 1; i < 8; i++) {
            mtlLoader.load(`/static/model/city/ny${i}.mtl`, preMaterial => {
                preMaterial.preload();
                objLoader.setMaterials(preMaterial).load(`/static/model/city/ny${i}.obj`, (obj) => {
                    obj.position.set(6691, 604.35216, 2154.6111);
                    this.scene.add(obj);
                })
            })
        }
    }

    initEffectComposer(params) {
        this.effectComposer = new EffectComposer(this.renderer);
        this.effectComposer.setSize(window.innerWidth, window.innerHeight);
    
        //这个通道主要是把当前场景渲染成一张图片
        const renderPass = new RenderPass(this.scene, this.camera);
        this.effectComposer.addPass(renderPass);
    
        const bloomPass = new UnrealBloomPass(new Vector2(window.innerWidth, window.innerHeight),
            1.7, // strength发光强度  值越大就越亮
            0.4, // radius 发光半径  发光扩散半径  值越大，扩散就越均匀 值越小 基本上就往模型上集中
            0.1, // threshold 发光的阈值 大于这个阈值才发光，准确亮度比阈值越大的地方放光就越强烈
        )
    
        this.effectComposer.addPass(bloomPass);
    
    }
}
